import React,{ Component } from "react";


export default class Hello extends Component{
    state = {
        count: 1
    }

    add = () => {
        // this.setState({
        //     count: ++this.state.count
        // })
        this.setState(() => {   //  这个写法才能 判断  shouldComponentUpdate 函数里面的 nextState 是旧值
            this.state.count++
            return {
                count: this.state.count
            }
        })
    }

    componentWillReceiveProps(nextProps) {
        // 用于获取最新的 属性
        // 用于判断组价当前的属性是否改变过
        console.log("Hello  componentWillReceiveProps  1")
        // console.log("nextProps: ", nextProps);
        // console.log("新旧值做一个对比：",this.props.name === nextProps.name)
    }

    shouldComponentUpdate(nextProps, nextState) {  //  最新的属性(传过来的) 和 最新的状态(自己定义的)
        // 表示组件是否更新，这个钩子只要写，就必须有返回值，返回值是布尔值
        // 这个钩子函数是性能优化的关键
        console.log("Hello  shouldComponentUpdate  2")
        console.log(nextState, this.state)
        // console.log("nextProps:", nextProps, "nextState:", nextState,  this.props.name === nextProps.name)
        // return !(this.props.name == nextProps.name)
        return !(this.state.count == nextState.count)
        return true
    }

    componentWillUpdate() {
        // 表示组件即将更新
        console.log("Hello  componentWillUpdata  3")
    }

    render() {
        console.log("render 4")
        const {name} = this.props
        const {count} = this.state
        return (
            <div>
                <hr />
                <div >Hello组件: {name}</div>
                <button onClick={this.add}>Hello 修改 自己的 状态</button>
                <div>{count}</div>
            </div>
        )
    }

    componentDidUpdate() {
        // 表示组件更新结束，真实DOM又生成了
        console.log("Hello  componentDidUpdate 5")
    }

   
}

// export default function Hello() {
  

//     return (
//         <div>
          
//         </div>
//     )
// }